<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗练习</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			table {
				font-size: 18px;
				text-align: center;
				border-collapse: collapse;
				height: 150px;
				border: 1px solid;
			}
			
			tr{
				border: 1px solid;
			}
			td:not(:last-child) {
				width: 80px;
				border: 1px solid;
			}

			.pop-box {
				width: 100vw;
				height: 100vh;
				background-color: rgba(000, 000, 000, 0.5);
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
			}

			.hind {
				padding: 0 30px;
				box-sizing: border-box;
				width: 100%;
			}

			.center-box {
				width: 300px;
				height: 300px;
				background-color: white;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				flex-direction: column;
				padding: 10px 12px 24px;
				box-sizing: border-box;
			}

			button {
				font-size: 18px;
				padding: 4px 16px;
				border: none;
				border-radius: 4px;
				color: white;
			}

			button:nth-child(n+2) {
				margin-left: 20px;
			}

			.but-ok {
				background-color: lightgreen;
			}

			.but-not {
				background-color: maroon;
			}

			.but-warn {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table >
				<tr>
					<td>序号</td>
					<td>商品名</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in goods">
					<td>{{index+1}}</td>
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td>
						<button v-for="but in val.config" :class="but.className" @[but.eventname]=handleClick(but.type)>
							{{but.text}}
						</button>
					</td>
				</tr>
			</table>

			<pop-center :pop-config="popConfig" v-if="isShow" v-model="isShow" @handle-clic="handleClic" @but-click="butClick"></pop-center>
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data() {
			const config = [{
				text: "增加",
				className: ["but-ok", true],
				eventname: "click",
				type: 1
			},
			{
				text: "减少",
				className: ["but-warn", true],
				eventname: "click",
				type: 2
			}, 
			{
				text: "删除",
				className: ["but-not", true],
				eventname: "dblclick",
				type: 3
			}, 
			{
				text: "修改",
				className: ["but-warn", true],
				eventname: "click",
				type: 4
			},]
			return {
				goods: [{
					title: "茉莉茶",
					price: 10,
					chooseNum: 0,
					allPrice: 0,
					config
				}, {
					title: "红茶",
					price: 10,
					chooseNum: 0,
					allPrice: 0,
					config
				}, {
					title: "乌龙茶",
					price: 10,
					chooseNum: 0,
					allPrice: 0,
					config
				}],
				popConfig: {
					text: "你确定要执行此选项吗？",
					but: [
						{
							text: "确认",
							className: ["but-ok", true],
							eventname: "click",
							type: "ok"
						}, {
							text: "取消",
							className: ["but-warn", true],
							eventname: "click",
							type: "cancle"
						}
					],
				},
				isShow: false,
				optType:undefined
			}
		},
		methods: {
			handleClick(type) {
				this.optType = type
				switch (type) {
					case 1:
						break;
					case 2:
						break;
					case 3:
						this.isShow = true
						this.popConfig.text = '你确定要删除此项吗?删除后无法恢复！'
						break;
					case 4:
						this.isShow = true
						this.popConfig.text = '你确定修改此项吗？'
						break;
					default:
						break;
				}
			},
			butClick(type){
				this.isShow = false
				if(type === 'ok'){
					switch (type) {
						case 1:
							break;
						case 2:
							break;
						case 3:
							console.log('执行删除操作')
							break;
						case 4:
							console.log('执行修改操作')
							break;
						default:
							break;
					}
				}
			}
			// inerses(index) {
			// 	this.goods[index].chooseNum++
			// },
			// dserse(index) {
			// 	if (this.goods[index].chooseNum <= 0) {
			// 		return;
			// 	}
			// 	this.goods[index].chooseNum--
			// }
		}
	})
	app.component("pop-center", {
		props: ["popConfig", "modelValue"],
		methods:{
			handleClic(type){
				this.$emit('butClick',type)
			}
		},
		template: `
			<div class="pop-box">
				<div class="center-box">
					<div class="x" @click="$emit('update:modelValue',false)">x</div>
					<div class="hind">
						{{popConfig.text}}
					</div>
					<div class="btn">
						<button v-for="but in popConfig.but" :class="but.className" @[but.eventname]="butClick()">
							{{but.text}}
						</button>
					</div>
				</div>
			</div>
		`
	})
	const vm = app.mount("#app")
</script>